<template>
  <div class="common-parameter" ref="pageView" v-loading="loading">
    <div class="select">
      <el-row
        class="order-title"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-form
          ref="search"
          class="order-search"
          :inline="true"
          :model="search"
          :show-message="false"
        >
          <el-form-item>
            <el-date-picker
              v-model="search.time"
              size="small"
              value-format="yyyy-MM-dd"
              prefix-icon="time"
              placeholder="选择日期"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="search.cj"
              placeholder="选择车间"
              size="small"
              clearable
            >
              <template #prefix>车间： </template>
              <el-option
                v-for="item in cjOption"
                :key="item.id"
                :label="item['key_value']"
                :value="item['key_value']"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="search.pz"
              placeholder="选择品种"
              size="small"
              clearable
            >
              <template #prefix>品种： </template>
              <el-option
                v-for="item in pzOption"
                :key="item.id"
                :label="item['key_value']"
                :value="item['key_value']"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          <el-button size="small" type="primary" @click="onSearch"
            >搜索</el-button
          >
          <el-button
            size="small"
            icon="el-icon-s-tools"
            type="primary"
            @click="onAdd"
            >自选生产薪资报表</el-button
          >
        </div>
      </el-row>
    </div>
    <div style="margin-top:15px">
      <div class="common-table" ref="table">
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :max-height="tableHeight"
        >
          <template v-for="(item, index) in columnData">
            <el-table-column
              :key="index"
              v-if="item.isShow"
              :prop="item.key"
              :label="item.name"
              :width="item.width"
              :align="item.align"
              :fixed="item.fixed"
            >
            <template slot-scope="scope">
              {{scope.row[item.key] || '-'}}
            </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-size="search.size"
          :current-page.sync="search.page"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <add-optional-report
      ref="addOptionalReport"
      @update="updateTable"
    ></add-optional-report>
  </div>
</template>
<script>
import AddOptionalReport from '../components/AddOptionalReport.vue';
import { querySalaryReport } from '@/api/salaryReport';
import columnTempData from './ClassColumn'
export default {
  components: {
    AddOptionalReport,
  },
  data() {
    return {
      loading: true,
      tableHeight: 200,
      // 时间选择器
      search: {
        cj: '',
        gongxu: '细纱',
        pz: '',
        bc: '甲班',
        size: 10,
        page: 1,
        time: '',
      },
      tableData: [],
      total: 0,
      columnData: columnTempData,
    };
  },
  computed: {
    // 车间
    cjOption() {
      return this.$store.getters.cjOption;
    },
    // 品种
    pzOption() {
      return this.$store.getters.pzOption;
    },
  },
  created() {
    this.search.time = this.$yyyymmdd(new Date());
  },
  mounted() {
    // 获取table 高度
    this.$nextTick(() => {
      this.getHeight();
      this.getTableData();
    });
  },
  methods: {
    onSearch() {
      this.search.page = 1;
      this.getTableData();
    },
    onAdd() {
      this.$refs.addOptionalReport.show();
    },
    async getTableData() {
      let form = Object.assign({}, this.search);
      const res = await querySalaryReport(form);
      if (res.code == 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    handleSizeChange(val) {
      this.search.page = 1;
      this.search.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.getTableData();
    },
    getHeight() {
      this.tableHeight = this.$refs.pageView.offsetHeight - 140;
    },
    updateTable(data) {
      let columnData = [];
      columnTempData.forEach((item) => {
        if (data.indexOf(item.key) > -1) {
          columnData.push(item);
        }
      });
      console.log(columnData);
      this.columnData = columnData;
    },
  },
};
</script>

<style lang="scss">
.common-parameter {
  height: 100%;
  overflow: hidden;
  .select {
    background: #f6f9fc;
    padding-bottom: 15px;
  }
  .time:before {
    content: '时间:';
    color: #606d86;
    font-style: normal;
  }
  .el-date-editor {
    .el-input__suffix-inner {
      .el-input__icon:after {
        width: 15px;
        position: relative;
        top: 12px;
        right: 5px;
        background: url('~@/assets/img/time.jpg') no-repeat;
      }
      .el-input__icon.el-icon-circle-close:after {
        display: none;
      }
    }
  }
}
</style>
